<template>
  <div class="flex" v-if="userInfo">
    <header>
      <img src="/static/images/me_bg@2x.png" width="100%">
      <div class="userInfo flex-row">
        <vue-img :src="$store.getters['user/avatar']" class="avatar"></vue-img>
        <div class="info flex-grow">
          <div class="top">
            <span class="name">{{ userInfo.nick_name }}</span>
            <span>{{ userInfo.phonenum || '' }}</span>
          </div>
          <div class="bottom">欢迎来到此平台</div>
        </div>
      </div>
    </header>

    <main>
      <div class="counts flex-row">
        <div class="item flex-grow flex flex-center" @click="$toView('calledList')">
          <span class="number">{{ countInfo.consult_record_count }}</span>
          <span class="text">我的咨询</span>
        </div>
        <div class="item flex-grow flex flex-center" @click="$toView('publishedList')">
          <span class="number">{{ countInfo.publish_count }}</span>
          <span class="text">已发布</span>
        </div>
        <div class="item flex-grow flex flex-center" @click="$toView('collectedList')">
          <span class="number">{{ countInfo.collect_count }}</span>
          <span class="text">我的收藏</span>
        </div>
      </div>

      <div class="items">
        <div class="item" @click="$deepToView('about')">关于我们</div>
        <div class="item" @click="$deepToView('feedback')">意见反馈</div>
        <div class="item" @click="$alert.toast('功能暂未开放')">帮助中心</div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data (){
    return {
      userInfo: null,
      countInfo: null
    }
  },

  activated (){
    this.loadUserData()
  },

  methods: {
    loadUserData (){
      var userId = localStorage.getItem('user_id')
      this.$alert.loading.show('加载中')
      Promise.all([
        this.$store.dispatch('user/load'),
        _api('index/my')
      ]).finally(this.$alert.loading.hide)
      .then(([data1, data2]) =>{
        this.userInfo = data1
        this.countInfo = data2
      })
      .catch(e =>{
        console.log(e)
        this.$alert.toast('网络错误', 'cancel')
      })
    }
  }
}
</script>

<style lang="less" scoped>
header{
  position: relative;
  font-size: 0;

  .userInfo{
    width: 100%;
    height: 60px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 20px;
    font-size: 14px;
    color: white;
    box-sizing: border-box;

    .info{
      position: relative;
      top: 5px;
      left: 20px;
    }
  }
}

.avatar{
  width: 60px;
  height: 60px;
  border-radius: 50%; 
  border: 2px white solid;
  box-sizing: border-box;
}

.name{
  font-size: 17px;
}

main{
  padding: 0 10px;

  .counts{
    height: 90px;
    background-color: white;
    border-radius: 10px;
    transform: translateY(-50%);
    margin-bottom: -45 + 10px;

    .number{
      font-size: 20px;
      color: @theme;
    }

    .text{
      font-size: 15px;
    }
  }

  .items{
    
    .item{
      height: 50px;
      line-height: 50px;
      border-radius: 10px;
      text-indent: 30px;
      background-color: white;
      margin: 5px 0;
      position: relative;

      &::before{
        content: '';
        display: block;
        width: 5px;
        height: 30%;
        background-color: @theme;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
      }

      &::after{
        content: '';
        display: block;
        width: 10px;
        height: 16px;
        background-image: url('~@img/btn/me_icon_more@2x.png');
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>